import { Form, Input, InputNumber, message, Modal, Radio, Select, type FormProps } from "antd"
import type { AdvertisementAddParams } from "../../type/advertisement"
import UploadImg from "../../utils/UploadImg"
import { adtypeTypeList, advertisementAdd } from "../../apis/advertisement"
import type { ScopeServicesList } from "../../type/stores"
import { useEffect, useState } from "react"
import '../../assets/css/advertisement/advertisement.css'
type FieldType = {
    title: string;
    picture: string;
    sort: number;
    typeid: number;
    enabled: number;
    url: string;
};

interface AdvertisementAddFormProps {
    handleCancel: () => void
    advertisementAddParams: AdvertisementAddParams
}
function AdvertisementAdd({ handleCancel, advertisementAddParams }: AdvertisementAddFormProps) {


    let [adtype, setAdtype] = useState<ScopeServicesList[]>([])
    const [form] = Form.useForm();
    const [picture, setPicture] = useState<string | undefined>();
    const stateData = [
        { label: '显示', value: 1 },
        { label: '不显示', value: 0 },
    ]
    useEffect(() => {
        adtypeTypeListtApi()
        form.setFieldsValue(advertisementAddParams)
        setPicture(advertisementAddParams.picture)
    }, [])

    useEffect(() => {
        form.setFieldValue("picture", picture);

    }, [picture])

    const uploadHandle = (url: string) => {

        form.setFieldValue("picture", url);

    }

    const sumbit = () => {
        form.submit();
    }
    const onFinish: FormProps<AdvertisementAddParams>['onFinish'] = async (values) => {
        let res = await advertisementAdd(values)
        if (res.errCode == 10000) {
            message.success(advertisementAddParams.id !== 0 ? '修改成功' : '添加成功')
            handleCancel()
        }
    };

    // 类型列表
    let adtypeTypeListtApi = async () => {
        let res = await adtypeTypeList()
        setAdtype(res.data.list)
    }

    return (
        <div className='AdvertisementAdd'>
            <Modal
                title={advertisementAddParams.id !== 0 ? "添加图片" : "修改图片"}
                closable={{ 'aria-label': 'Custom Close Button' }}
                open={true}
                style={{ width: '1000px' }}
                onOk={sumbit}
                onCancel={handleCancel}
            >
                <Form
                    name="basic"
                    style={{ width: '100%' }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    form={form}
                    autoComplete="off"
                >
                    <Form.Item<FieldType>
                        label="标题"
                        name="title"
                        style={{ width: '600px' }}
                        rules={[{ required: true, message: '请输入标题!' }]}
                        labelCol={{ span: 7 }}
                    >
                        <Input style={{ width: '300px' }} placeholder="请输入店名" />
                    </Form.Item>

                    <Form.Item<FieldType>
                        label="类型"
                        name="typeid"
                        style={{ width: '600px' }}
                        labelCol={{ span: 7 }}
                        rules={[{ required: true, message: '请选择类型!' }]}>
                        <Select
                            allowClear
                            style={{ width: '300px' }}
                            placeholder="请选择"
                        >
                            {
                                adtype.map((item) => {
                                    return <Select.Option value={item.id}>{item.name}</Select.Option>
                                })
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item<FieldType>
                        label="URL"
                        name="url"
                        labelCol={{ span: 7 }}
                        style={{ width: '600px' }}
                    >
                        <Input style={{ width: '300px' }} placeholder="请输入URL" />
                    </Form.Item>
                    <Form.Item<FieldType>
                        label="公告照片"
                        name="picture"
                        labelCol={{ span: 7 }}
                        style={{ width: '600px' }}
                        rules={[{ required: true, message: '请选择图片!' }]}
                    >
                        <UploadImg uploadHandle={uploadHandle} defaultImgUrl={picture} />
                    </Form.Item>
                    <Form.Item<FieldType>
                        label="排序"
                        name="sort"
                        style={{ width: '600px' }}
                        labelCol={{ span: 7 }}
                        rules={[{ required: true, message: '请输入排序!' }]}
                    >
                        <InputNumber style={{ width: '300px' }} />
                    </Form.Item>
                    <Form.Item<FieldType>
                        label="是否显示"
                        name="enabled"
                        style={{ width: '400px' }}
                        labelCol={{ span: 7 }}
                        rules={[{ required: true, message: '请选择是否显示!' }]}>
                        <Radio.Group block options={stateData} defaultValue={1} />
                    </Form.Item>

                </Form>
            </Modal>
        </div>
    )
}
export default AdvertisementAdd